<template>
	<view>
		<view>
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
				styleType="text"></uni-segmented-control>
			<view>
				<view v-if="current === 0">
					<view style="padding: 40rpx;">
						<uni-forms class="form" ref="studentLeaveForm" :modelValue="studentLeaveForm"
							label-position="left" labelWidth="100px">
							<uni-forms-item label="姓名" required name="classId"
								style="display: flex; align-items: center;">
								<view>{{identity.studentName}}</view>
							</uni-forms-item>
							<uni-forms-item label="班级" required name="classId"
								style="display: flex; align-items: center;">
								<view class="">{{identity.className}}</view>
							</uni-forms-item>
							<uni-forms-item label="开始日期" required name="leaveStartTime">
								<uni-datetime-picker type="datetime" :clear-icon="false" @change="stratDays"
									:start="Date.now()" placeholder="选择请假开始日期"
									v-model="studentLeaveForm.leaveStartTime" />
							</uni-forms-item>
							<uni-forms-item label="结束日期" required name="leaveEndTime">
								<uni-datetime-picker type="datetime" :clear-icon="false" @change="cacleDays"
									:start="Date.now()" placeholder="选择请假结束日期"
									v-model="studentLeaveForm.leaveEndTime" />
							</uni-forms-item>
							<uni-forms-item label="请假天数" required name="leaveTotalTime"
								style="display: flex; align-items: center;">
								<uni-easyinput type="text" v-model="studentLeaveForm.leaveTotalTime" disabled />
							</uni-forms-item>
							<uni-forms-item label="请假类型" required name="leaveType">
								<uni-data-select v-model="studentLeaveForm.leaveType" :localdata="leaveTypeList"
									field="dictValue as value, dictLabel as name"></uni-data-select>
							</uni-forms-item>
							<uni-forms-item label="请假原因" required name="leaveRemarks">
								<uni-easyinput type="textarea" v-model="studentLeaveForm.leaveRemarks"
									placeholder="请输入请假原因" />
							</uni-forms-item>
						</uni-forms>
						<button @click="submit" type="primary">提交请假</button>
					</view>
				</view>
				<view v-if="current === 1">
					<uni-card style="padding-bottom: 10rpx;" v-for="(item,index) in historyList" :key="item.id" title="请假申请" @click="popupShow(item,index)">
							<uni-row>
								<uni-col :span="24">
									<view class="" style="font-size: 30rpx; ">
										开始时间:
										<span>{{item.startDate}}</span>
									</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<uni-col :span="24">
									<view class="" style="font-size: 30rpx;">
										结束时间:
										<span>{{item.endDate}}</span>
									</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<uni-col :span="24">
								<view class="" style="font-size: 30rpx;">
									<view v-if="item.status == 0">
										处理状态:<span style="background-color: #ff4500; color: white;">处理中</span>
									</view>
									<view v-if="item.status == 1">
										处理状态:<span style="background-color: #008000; color: white;">通过</span>
									</view>
									<view v-if="item.status == 2">
										处理状态:<span style="background-color: #ff0000; color: white;">拒绝</span>
									</view>
									<view v-if="item.status == 3">
										处理状态:<span style="background-color: grey; color: white;">审批过期</span>
									</view>
									<view v-if="item.status == 4">
										处理状态:<span style="background-color: gray; color: white;">已销假</span>
									</view>
									<view v-if="item.status == 5">
										处理状态:<span style="background-color: #ff4500; color: white;">销假中</span>
									</view>
								</view>
								</uni-col>
							</uni-row>
					</uni-card>
					<!-- <view style="padding: 10px; border-bottom: 0.1px solid #f6f7fc;" v-for="(item,index) in historyList" :key="item.id" @click="popupShow(item,index)">
						<uni-row>
							<uni-col :span="6" style="font-weight: 700; display: flex; justify-content: center;  align-items: center; ">
									<view >请假申请</view>
							</uni-col>
							<uni-col :span="12">
									<view class="" style="font-size: 22rpx; ">
										开始时间:
										<span>{{item.startDate}}</span>
									</view>
									<view class="" style="font-size: 22rpx;">
										结束时间:
										<span>{{item.endDate}}</span>
									</view>
									<view class="" style="font-size: 22rpx; ">请假类型：
										<span v-if="item.leaveType == 1">事假</span>
										<span v-if="item.leaveType == 2">病假</span>
									</view>
							</uni-col>
							<uni-col :span="6">
								<view class="">
									<view v-if="item.status == 0">
										<span>处理中</span>
									</view>
									<view v-if="item.status == 1">
										<span>通过</span>
									</view>
									<view v-if="item.status == 2">
										<span>拒绝</span>
									</view>
									<view v-if="item.status == 3">
										<span>审批过期</span>
									</view>
									<view v-if="item.status == 4">
										<span>已销假</span>
									</view>
									<view v-if="item.status == 5">
										<span>销假</span>
									</view>
								</view>
							</uni-col>
						</uni-row>
					</view> -->

					<view class="" style="position: absolute; left: 10%; top: 20%;" v-if="historyList.length <= 0">
						<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
					</view>
				</view>
				<!-- 弹框 -->
				<uni-popup ref="popup" type="bottom">
					<view style="width: 100%; background-color: #fff; padding: 20rpx; ">
						<uni-row >
							<view class="" style="height:  60rpx;line-height: 60rpx; text-align: center; font-size: 36rpx;">请假申请</view>
						</uni-row>
						<uni-row>
							<uni-col :span="10">
								<view style="height: 60rpx;line-height: 60rpx;">姓名</view>
							</uni-col>
							<uni-col :span="14">
								<view style="height: 60rpx;line-height: 60rpx;">{{identity.studentName}}</view>
							</uni-col>
						<!-- 	<view class="" style="display: flex; padding: 20rpx 0; align-items: center; margin-top: 20rpx;">
								<view style="width: 30%;">姓名</view>
								<view style="font-weight: 400;">{{identity.studentName}}</view>
							</view> -->
						</uni-row>
						<uni-row>
							<uni-col :span="10">
								<view style="height: 60rpx;line-height: 60rpx;">班级</view>
							</uni-col>
							<uni-col :span="14">
								<view style="height: 60rpx;line-height: 60rpx;">{{identity.className}}</view>
							</uni-col>
						</uni-row>
						<uni-row>
							<uni-col :span="10">
								<view style="height: 60rpx;line-height: 60rpx;">请假开始时间</view>
							</uni-col>
							<uni-col :span="14">
								<view style="height: 60rpx;line-height: 60rpx;">{{startDate}}</view>
							</uni-col>
						</uni-row>
						<uni-row>
							<uni-col :span="10">
								<view style="height: 60rpx;line-height: 60rpx;">请假结束时间</view>
							</uni-col>
							<uni-col :span="14">
								<view style="height: 60rpx;line-height: 60rpx;">{{endDate}}</view>
							</uni-col>
						</uni-row>
						<uni-row>
							<uni-col :span="10">
								<view style="height: 60rpx;line-height: 60rpx;">请假类型</view>
							</uni-col>
							<uni-col :span="14">
								<view style="height: 60rpx;line-height: 60rpx;">{{leaveType}}</view>
							</uni-col>
						</uni-row>
						<uni-row>
							<uni-col :span="10">
								<view style="height: 60rpx;line-height: 60rpx;">请假原因</view>
							</uni-col>
							<uni-col :span="14">
								<view style="height: 60rpx;line-height: 60rpx;">{{leaveReason}}</view>
							</uni-col>
						</uni-row>
						<uni-row>
							<uni-col :span="10">
								<view style="height: 60rpx;line-height: 60rpx;">审批人</view>
							</uni-col>
							<uni-col :span="14">
								<view style="height: 60rpx;line-height: 60rpx;">{{author}}</view>
							</uni-col>
						</uni-row>
						<uni-row>
							<uni-col :span="10">
								<view style="height: 60rpx;line-height: 60rpx;">处理状态</view>
							</uni-col>
							<uni-col :span="14">
								<view style="height: 60rpx;line-height: 60rpx;">
									<span v-if="status==0" style="color: orangered;font-size: 50rpx;">处理中</span>
									<span v-if="status==1" style="color: green;font-size: 50rpx;">通过</span>
									<span v-if="status==2" style="color: red;font-size: 50rpx;">拒绝</span>
									<span v-if="status==3" style="color: olivedrab;">审批过期</span>
									<span v-if="status==4" style="color: olivedrab;">已销假</span>
									<span v-if="status==5" style="color: olivedrab;">销假</span>
								</view>
							</uni-col>
						</uni-row>
						<uni-row>
							<view class="tijiao" v-if="statusShow" type="primary" @click="cancelStuLeave">销假</view>
						</uni-row>
						<!-- <view class="" style="display: flex; padding: 20rpx 0; align-items: center;">
							<view style="width: 30%;">班级</view>
							<view style="font-weight: 400;">{{identity.className}}</view>
						</view>
						<view class="" style="display: flex; padding: 20rpx 0; align-items: center;">
							<view style="width: 30%;">请假开始时间</view>
							<view style="font-weight: 400;">{{startDate}}</view>
						</view>
						<view class="" style="display: flex; padding: 20rpx 0; align-items: center;">
							<view style="width: 30%;">请假结束时间</view>
							<view style="font-weight: 400;">{{endDate}}</view>
						</view>
						<view class="" style="display: flex; padding: 20rpx 0; align-items: center;">
							<view style="width: 30%;">请假类型</view>
							<view style="font-weight: 400;">{{leaveType}}</view>
						</view>
						<view class="" style="display: flex; padding: 20rpx 0;  align-items: center;">
							<view style="width: 30%;">请假原因</view>
							<view style="font-weight: 400;">{{leaveReason}}</view>
						</view>
						<view class="" style="display: flex; padding: 20rpx 0;  align-items: center;">
							<view style="width: 30%;">审批人</view>
							<view style="font-weight: 400;">{{author}}</view>
						</view>
						<view style="display: flex; padding: 20rpx 0;  align-items: center;">
							<view style="width: 30%;">处理状态</view>
							<view>
								<span v-if="status==0" style="color: orangered;font-size: 50rpx;">处理中</span>
								<span v-if="status==1" style="color: green;font-size: 50rpx;">通过</span>
								<span v-if="status==2" style="color: red;font-size: 50rpx;">拒绝</span>
								<span v-if="status==3" style="color: olivedrab;">审批过期</span>
								<span v-if="status==4" style="color: olivedrab;">已销假</span>
								<span v-if="status==5" style="color: olivedrab;">销假</span>
							</view>
						</view>
						<view class="tijiao" v-if="statusShow" type="primary" @click="cancelStuLeave">销假</view> -->
						<!-- <view class="" style="display: flex; padding: 20rpx 0;  align-items: center;">
							<view style="width: 30%;">点击查看</view>
							<view style="width: 30%;color: crimson;" @click="popupShowSteps(item)">审批时间轴</view>
						</view> -->
						<!-- <view style="width: 30%;color: crimson;" @click="popupShowSteps(item)">审批时间轴</view> -->
						<!-- <view class="" style="display: flex; padding: 20rpx 0;  align-items: center;">
							<view style="width: 30%;">审批人</view>
							<view style="font-weight: 400;">{{zuozhe}}</view>
						</view>
						<uni-steps style="background-color: #fff; padding: 20rpx;" 
						:options="activeList"
						 direction="column" :active="activeIndex">
						</uni-steps> -->
						
					</view>

				</uni-popup>
			</view>
			<!-- <uni-popup ref="popup" type="bottom">
					<view style="height: 30vh; width: 100%; background-color: #fff;">
						<view style="display: flex; border-bottom: 1rpx solid #aaa; padding: 20rpx;">
							<view style="width: 50%;" class="">姓名：{{identity.studentName}}</view>
							<view class="">班级：{{identity.className}}</view>
						</view>
						<view style="display: flex; margin-top: 20rpx; border-bottom: 1rpx solid #aaa;padding: 20rpx;">
							<view style="width: 50%;" class="">开始日期：{{startDate}}</view>
							<view class="">结束日期：{{endDate}}</view>
						</view>
						<view style="display: flex; margin-top: 20rpx; border-bottom: 1rpx solid #aaa;padding: 20rpx;">
							<view style="width: 50%;" class="">请假天数：{{totalDays}}天</view>
							<view class="">请假类型：{{leaveType}}</view>
						</view>
						<view style="margin-top: 20rpx;padding: 20rpx; ">
							请假原因：{{leaveReason}}
						</view>
					</view>
				</uni-popup> -->
				<view>
					<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="是否撤销该请假" @confirm="dialogConfirm"
							@close="dialogClose">
							<text>{{this.contentMsg}}</text>
							</uni-popup-dialog>
					</uni-popup>
				</view>
		</view>
	</view>
	</view>
</template>

<script>
	import studentWork from "@/api/modules/studentWork.js"
	import teachClass from '@/api/modules/teachClass'
	export default {
		data() {

			return {
				statusShow: false,
				topName: "学生请假",
				userName: "",
				current: 0,
				items: ['提交请假', '请假记录'],
				studentLeaveForm: {
					classId: "",
					studentNo: "",
					leaveStartTime: "",
					leaveEndTime: "",
					leaveTotalTime: "",
					leaveType: "",
					leaveRemarks: "",
					name: "",
				},
				identity: null,
				leaveTypeList: [],
				historyList: [],
				startDate: "",
				endDate: "",
				totalDays: "",
				leaveType: "",
				leaveReason: "",
				status: "",

				//步骤条数据集合
				activeIndex:0,
				activeList:[
					{
						title:'处理中',
						index:1,
					},
					{
						title:'通过',
						index:2,
					},
					{
						title:'拒绝',
						index:3,
					}
				],
				optionsList:[],
				author:"",

			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				if (e.currentIndex == 1) {
					studentWork.getStuLeaveApplyList(this.identity.id).then(res => {
						this.historyList = res.data
					})
					
					studentWork.studentLeaveCorrelationInfo(this.identity.id).then(res => {
						console.log(res.data);
						this.optionsList = res.data
					})
				}
			},
			getStudentLeaveCorrelationInfo() {
				studentWork.getStuLeaveApplyList(this.identity.id).then(res => {
					this.historyList = res.data
				})
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				studentWork.studentCancelLeaveApply({
					id: this.id
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: "已提交销假申请",
							icon: 'none',
						})
					}
					this.getStudentLeaveCorrelationInfo();
			
				}).catch(error => {
					console.log(error);
					if (error.data.code == 501) {
						uni.showToast({
							title: error.data.message,
							icon: 'error',
						})
					}
			
					if (error.data.code == 502) {
						uni.showToast({
							title: error.data.message,
							icon: 'error',
						})
					}
				})
				this.$refs.popup.close()
				this.id = ""
				this.flag = ""
			},
			dialogClose() {
				console.log('点击关闭')
			},
			cancelStuLeave() {
				const now = new Date();
				const today = new Date(now.getFullYear(), now.getMonth(), now.getDate(),now.getHours(),now.getMinutes(),now.getSeconds());
				// const targetTime = new Date(today.getTime() + (17 * 60 * 60 * 1000));
				const beginTime = new Date(this.endDate)
				const targetTime = new Date(beginTime.getTime() + (22 * 60 * 60 * 1000));
				console.log(beginTime)
				console.log(today)
				console.log(targetTime)
				if (now >= targetTime) {
					uni.showToast({
						title: "当前请假时间已过,无法撤销!",
						icon: "none",
					})
					return;
				} 
				console.log(this.id)
				this.msgType = 'warn'
				this.contentMsg = '是否撤销请假!'
				this.$refs.alertDialog.open()
					
			},
			cacleDays(e) {
				if (this.studentLeaveForm.leaveEndTime && this.studentLeaveForm.leaveStartTime) {
					this.studentLeaveForm.leaveTotalTime = ((new Date(this.studentLeaveForm.leaveEndTime).getTime() -
						new Date(
							this.studentLeaveForm.leaveStartTime).getTime()) / 1000 / 60 / 60 / 24 ).toFixed(2)
				}
				console.log(e)
			},
			stratDays(e) {
				if (this.studentLeaveForm.leaveEndTime && this.studentLeaveForm.leaveStartTime) {
					this.studentLeaveForm.leaveTotalTime = ((new Date(this.studentLeaveForm.leaveEndTime).getTime() -
						new Date(
							this.studentLeaveForm.leaveStartTime).getTime()) / 1000 / 60 / 60 / 24 ).toFixed(2)
				}
				console.log(e)
			},
			reset() {
				this.studentLeaveForm = {
					classId: "",
					studentNo: "",
					leaveStartTime: "",
					leaveEndTime: "",
					leaveTotalTime: "",
					leaveType: "",
					leaveRemarks: "",
					name: "",
					leaveReason: "",
				}
			},
			submit() {
				
				if (!this.studentLeaveForm.leaveStartTime) {
					uni.showToast({
						title: "请填写开始日期",
						icon: 'none',
					})
					return
				}
				if (!this.studentLeaveForm.leaveEndTime) {
					uni.showToast({
						title: "请填写结束日期",
						icon: 'none',
					})
					return
				}
				if (!this.studentLeaveForm.leaveType) {
					uni.showToast({
						title: "请填写请假类型",
						icon: 'none',
					})
					return
				}
				if (!this.studentLeaveForm.leaveRemarks) {
					uni.showToast({
						title: "请填写请假原因",
						icon: 'none',
					})
					return
				}

				uni.showLoading({
					mask: true,
					title: '提交中'
				});
				studentWork.createNewLeaveApply({
					studentId: this.identity.id,
					classId: this.identity.classId,
					startDate: this.studentLeaveForm.leaveStartTime,
					endDate: this.studentLeaveForm.leaveEndTime,
					leaveDay: this.studentLeaveForm.leaveTotalTime,
					leaveType: this.studentLeaveForm.leaveType,
					leaveReason: this.studentLeaveForm.leaveRemarks,
				}).then(res => {
					this.reset()
					if (res.code == 200) {
						uni.hideLoading()
						uni.showToast({
							title: "请假提交成功",
							icon: 'none',
						})

					}
				}).catch(err => {
					this.reset()
					uni.hideLoading()
					uni.showToast({
						title: err.data.message,
						icon: 'none',
					})
				})
			},

			popupShow(item,index) {
				this.$refs.popup.open()
				this.id = item.id
				this.startDate = item.startDate
				this.endDate = item.endDate
				this.totalDays = item.leaveDay
				this.status = item.status
				if (item.leaveType == 1) {
					this.leaveType = "病假"
				} else if (item.leaveType == 0) {
					this.leaveType = "事假"
				}
				this.leaveReason = item.leaveReason
				if(item.status == 0 || item.status == 1) {
					this.statusShow = true;	
				} else {
					this.statusShow = false;
				}
				
				
			
				// if(this.optionsList[index].status === "0"){
				// 	this.activeIndex  = 0;
				// }
				// if(this.optionsList[index].status === "1"){
				// 	this.activeIndex  = 1;
				// }
				// if(this.optionsList[index].status === "2"){
				// 	this.activeIndex  = 2;
				// }
				
				
				
				this.author = this.optionsList[index].username;
				console.log(this.author);
			},
			
			
			

			getLeaveType() {
				teachClass.getDictByType("leave_type").then(res => {
					res.data.forEach(item => {
						let obj = {}
						obj.text = item.dictLabel
						obj.value = item.dictValue
						this.leaveTypeList.push(obj)
					})
				})
			}
		},
		onLoad() {
			this.getLeaveType()
			this.identity = JSON.parse(uni.getStorageSync("identity"))
			this.userName = this.identity.studentName
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;
	}

	.box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		border-bottom: 0.1px solid #f6f7fc;
	}
	
	.tijiao {
		margin-top: 20rpx;
		width: 90%;
		background-color: #3333d3;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}
</style>